<template>
  <div :class="`video-info-box column ${maxmized ? 'maximized' : 'normal'}`">
    <q-bar style="background-color: transparent">
      <div style="width: 100px" />
      <div
        class="title col non-selectable text-center one-line-text text-no-wrap"
      >
        {{ currentTitle }}
      </div>
      <q-btn
        text-color="sub"
        dense
        flat
        icon="minimize"
        @click="emit('minimize')"
      />
      <q-btn
        text-color="sub"
        dense
        flat
        :icon="maxmized ? 'mdi-arrow-collapse' : 'mdi-arrow-expand'"
        @click="emit('maximize')"
      />
      <q-btn
        text-color="sub"
        dense
        flat
        icon="close"
        @click="emit('close')"
        v-close-popup
      />
    </q-bar>
    <q-scroll-area class="col">
      <div class="row justify-center items-center fit">
        <q-form class="info-form column q-pa-md q-gutter-y-md self-center">
          <q-input
            dense
            label="Title"
            v-model="title"
            filled
            color="sub"
            bg-color="black"
            text-color="white"
            input-style="color:#fff;"
          />
          <q-input
            dense
            v-model="description"
            filled
            type="textarea"
            label="Description"
            color="sub"
            bg-color="black"
            text-color="white"
            input-style="height: 8em;resize: none;font-size: 14px;color:#fff;"
            hide-bottom-space
          />
          <q-select
            dense
            borderless
            filled
            label-color="white"
            color="sub"
            bg-color="black"
            v-model="language"
            :options="languages"
            label="Audio Language"
          />
          <q-file
            dense
            filled
            use-chips
            color="accent"
            label-color="white"
            bg-color="black"
            v-model="selectedThumbnailFile"
            :label="file ? 'Select Thumbnail Image' : 'Change Thumbnail Image'"
            accept=".jpg, .png, image/*"
          />
          <template v-if="thumbnail">
            <q-img :ratio="16 / 9" :src="thumbnail" />
          </template>
          <template v-else-if="video">
            <q-img :ratio="16 / 9" :src="video.coverImage" />
          </template>
          <q-select
            filled
            dense
            multiple
            :max-values="3"
            v-model="topics"
            :options="topicOptions"
            bg-color="black"
            label-color="white"
            color="sub"
            label="Choose Topic"
            hint="How would you categorize this video?(Choose up to 3)"
          >
            <template v-slot:prepend>
              <q-icon name="search" />
            </template>
          </q-select>
          <q-input
            dense
            label="Medium"
            v-model="medium"
            hint="What medium did you use in your video?"
            filled
            color="sub"
            bg-color="black"
            text-color="white"
            input-style="color:#fff;"
          />
          <q-input
            dense
            label="Software"
            v-model="software"
            hint="Add the software used in this video"
            filled
            color="sub"
            bg-color="black"
            text-color="white"
            input-style="color:#fff;"
          />
          <q-select
            v-model="tags"
            dense
            filled
            color="accent"
            bg-color="black"
            use-chips
            use-input
            multiple
            hide-dropdown-icon
            label="Tags"
            hint="Use tags to add more detail to you video(Press Enter to add new)"
            new-value-mode="add-unique"
          ></q-select>
          <q-select
            dense
            filled
            v-model="visability"
            :options="visabilityOptions"
            bg-color="black"
            color="sub"
            label="Visability"
          >
            <template v-slot:prepend>
              <q-icon
                :name="visability.icon"
                :style="`color: ${visability.color}`"
              />
            </template>
            <template v-slot:option="scope">
              <q-item v-bind="scope.itemProps">
                <q-item-section avatar>
                  <q-icon
                    :name="scope.opt.icon"
                    :style="`color: ${scope.opt.color}`"
                  />
                </q-item-section>
                <q-item-section>
                  <q-item-label>{{ scope.opt.label }}</q-item-label>
                </q-item-section>
              </q-item>
            </template>
          </q-select>
          <q-select
            dense
            filled
            label="Playlist"
            v-model="selectedPlaylist"
            :options="playlists"
            bg-color="black"
            color="sub"
            option-label="title"
          >
            <template v-slot:prepend>
              <q-icon name="mdi-playlist-play" color="sub" />
            </template>
          </q-select>
          <q-field color="sub" filled bg-color="black" text-color="white">
            <template v-slot:control>
              <q-checkbox
                dense
                color="sub"
                v-model="isMaturity"
                label="Video has mature content"
              />
            </template>
          </q-field>
        </q-form>
      </div>
      <q-separator />
      <div class="row q-pa-md">
        <q-space />
        <q-btn
          rounded
          color="accent"
          :label="video ? 'Save' : 'Upload'"
          @click="submit"
        />
      </div>
    </q-scroll-area>
  </div>
</template>
<script setup lang="ts">
import LanguageConfig from 'src/models/LanguageConfig';
import Playlist from 'src/models/Playlist';
import Video from 'src/models/Video';
import { useGlobalStore } from 'stores/global-store';
import { useUserStore } from 'stores/user-store';
import { ref, PropType, onMounted, computed, watch } from 'vue';
const props = defineProps({
  file: {
    type: File,
  },
  video: {
    type: Object as PropType<Video>,
  },
  maxmized: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['minimize', 'maximize', 'close']);
const globalStore = useGlobalStore();
const userStore = useUserStore();
const currentTitle = ref('');
const title = ref('');
onMounted(async () => {
  await userStore.getMyPlaylists();
  if (props.file) {
    currentTitle.value = props.file.name;
  } else if (props.video) {
    currentTitle.value = props.video.title;
    title.value = props.video.title;
    description.value = props.video.description;
    if (props.video.audios) {
      const audio = props.video.audios.find((audio) => audio.isOriginal);
      if (audio) {
        language.value = languages.value.find(
          (lang) => lang.code === audio.langCode
        );
      }
    }
    const currentVisabilivty = visabilityOptions.value.find(
      (v) => v.id === props.video?.status
    );
    if (currentVisabilivty) {
      visability.value = currentVisabilivty;
    }
  } else {
    currentTitle.value = 'untitled';
  }
});

const languages = computed<LanguageConfig[]>(() => globalStore.languageConfig);
const playlists = computed(() => userStore.myPlaylists);
const language = ref<LanguageConfig>();
const description = ref('');
const thumbnail = ref<any>(undefined);
const selectedThumbnailFile = ref<File | undefined>(undefined);
watch(selectedThumbnailFile, (val: File | undefined) => {
  if (val) {
    thumbnail.value = URL.createObjectURL(val);
  } else {
    thumbnail.value = undefined;
  }
});
const topics = ref<string[]>([]);
const topicOptions = ref<string[]>(['3D', '2D', 'Modeling', 'Drawing']);
const medium = ref('');
const software = ref('');
const tags = ref<string[]>([]);
const isMaturity = ref(false);
const selectedPlaylist = ref<Playlist | undefined>(undefined);
const visability = ref<any | undefined>({
  id: 0,
  label: 'Public',
  icon: 'mdi-cloud-check',
  color: '#13C974',
});
const visabilityOptions = ref([
  {
    id: 1,
    label: 'Public',
    icon: 'mdi-cloud-check',
    color: '#13C974',
  },
  {
    id: 5,
    label: 'Private',
    icon: 'mdi-cloud-lock',
    color: '#59B8F8',
  },
  {
    id: 6,
    label: 'Save as Draft',
    icon: 'mdi-file-cloud',
    color: '#F19D30',
  },
]);
function submit() {
  emit('close');
}
</script>
<style lang="scss" scoped>
.video-info-box {
  background-image: linear-gradient(to bottom right, #2a2a2a, #1e1e1e);
  .title {
    color: $sub;
    font-size: 12px;
  }
  .info-form {
    max-width: 600px;
    width: 100%;
    height: 100%;
  }
}
.normal {
  width: 600px;
  min-height: 400px;
  height: 614px;
}
.maximized {
  width: 100%;
  height: 100%;
}
</style>
